@import url('@md-reader/theme');

.light() {
  --color-white: #fff;
  --color-primary: #607cd2;
  --color-primary--hover: #4c68bb;
  --color-success: #2fc178;
  --color-warning: #ff6767;
  --color-mark: #fff07e;
  --color-text-primary: #2d3d50;
  --color-text-secondary: #586069;
  --color-text-gray: #909090;
  --color-border: #d0d7de;
  --color-bg: #fff;
  --color-side: var(--color-text-secondary);
  --color-side-bg: #f9fafb;
  --color-side-border: #eaebee;
  --color-side-shadow: 0 0 5px rgba(35, 36, 49, 0.02),
    0 0 20px rgba(35, 36, 49, 0.2);
  --color-img-bg: #f8f9fa;
  --color-block-bg: var(--hljs-base);
  --color-code-bg: #f3f6ff;
  --color-thead-bg: #f6f8fa;
  --color-disabled: #d2d2d2;
  --color-button: fade(#586069, 40%);
  --color-button-bg: none;
  --color-button-hover: fade(#586069, 60%);
  --color-button-bg-hover: fade(#f1f1f1, 80%);
  --color-button-active: fade(#586069, 60%);
  --color-button-bg-active: fade(#f1f1f1, 50%);
  --shadow-button-text: 0.5px 0.5px 1px rgba(0, 0, 0, 0.12);
  --color-button_copy: var(--color-button);
  --color-button_copy-bg: var(--color-button-bg);
  --color-button_copy-hover: var(--color-button-hover);
  --color-button_copy-bg-hover: fade(#f1f1f1, 80%);
  --color-button_copy-active: var(--color-button-active);
  --color-button_copy-bg-active: fade(#f1f1f1, 60%);
  --size-scrollbar: 6.5px;
  --color-scrollbar-thumb: fade(#000, 25%);
  --color-scrollbar-thumb-hover: fade(#000, 35%);
  --color-modal-bg: rgba(255, 255, 255, 0.6);
  --opacity-img: 1;
  .hljs-light();
  .highlight();
}

.dark() {
  --color-white: #fff;
  --color-primary: #6785e0;
  --color-primary--hover: #7191f3;
  --color-success: #269f63;
  --color-warning: #ee6262;
  --color-mark: #fce79b;
  --color-text-primary: #b5b5b8;
  --color-text-secondary: #bbbbbb;
  --color-text-gray: #909090;
  --color-border: #30363d;
  --color-bg: #131415;
  --color-side: var(--color-text-primary);
  --color-side-bg: #030405;
  --color-side-border: #131415;
  --color-side-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.5);
  --color-img-bg: #5a5a5a;
  --color-block-bg: var(--hljs-base);
  --color-code-bg: #1d253d;
  --color-thead-bg: #222425;
  --color-disabled: #989898;
  --color-button: fade(#b5b5b8, 40%);
  --color-button-bg: none;
  --color-button-hover: fade(#b5b5b8, 60%);
  --color-button-bg-hover: fade(#3a3c3e, 50%);
  --color-button-active: fade(#b5b5b8, 60%);
  --color-button-bg-active: fade(#3a3c3e, 30%);
  --shadow-button-text: 0.5px 0.5px 1px rgba(0, 0, 0, 0.12);
  --color-button_copy: fade(#b5b5b8, 70%);
  --color-button_copy-bg: var(--color-button-bg);
  --color-button_copy-hover: fade(#b5b5b8, 90%);
  --color-button_copy-bg-hover: fade(#3a3c3e, 80%);
  --color-button_copy-active: fade(#b5b5b8, 90%);
  --color-button_copy-bg-active: fade(#3a3c3e, 60%);
  --size-scrollbar: 6.5px;
  --color-scrollbar-thumb: fade(#fff, 25%);
  --color-scrollbar-thumb-hover: fade(#fff, 35%);
  --color-modal-bg: rgba(0, 0, 0, 0.4);
  --opacity-img: 0.8;
  .hljs-dark();
  .highlight();
}

:root {
  .light();
  @media (prefers-color-scheme: dark) {
    .dark();
  }
  &[data-md-reader-theme='light'] .md-reader {
    .light();
  }
  &[data-md-reader-theme='dark'] .md-reader {
    .dark();
  }
  &:not([data-md-reader-theme-scheme-disabled]) {
    &[data-md-reader-theme='light'] {
      color-scheme: light;
    }
    &[data-md-reader-theme='dark'] {
      color-scheme: dark;
    }
  }
}

.scrollbar() {
  &::-webkit-scrollbar {
    width: var(--size-scrollbar);
    height: var(--size-scrollbar);
  }
  &::-webkit-scrollbar-track {
    width: var(--size-scrollbar);
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: var(--size-scrollbar);
    background: var(--color-scrollbar-thumb);
  }
  &::-webkit-scrollbar-thumb:hover {
    background: var(--color-scrollbar-thumb-hover);
  }
}
